<script>
import {reactive, shallowReactive, ref, shallowRef, readonly, shallowReadonly, onMounted, isProxy, isReactive, isReadonly, isRef, toRaw, toRefs, toRef, unref} from "vue";

export default {
  name: "App",
  setup(props, context) {
    /*
       toRefs()将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的


      toRef()：
        可以将值、refs 或 getters 规范化为 refs (3.3+)。
        也可以基于响应式对象上的一个属性，创建一个对应的 ref。这样创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值

      unref()
        如果我们要获取ref引用中的value，可以使用unref函数
        如果参数是 ref，则返回内部值，否则返回参数本身。这是 val = isRef(val) ? val.value : val 计算的一个语法糖。

    */
    const person = reactive({
      name: "陶品奇",
      age: 22,
      height: 175
    })

    /*
      直接解构赋值reactive()会得到普通的JavaScript对象(不是响应式的)
      const {name, age} = person
    */

    // 使用toRefs()解构reactive响应式对象
    const {name, age} = toRefs(person)
    console.log(name.value, age.value)

    // 使用toRef()解构单独的reactive响应式对象
    const height = toRef(person, "height")


    // unref() 获取ref引用中的value，
    const count = ref(0)
    console.log(count.value)
    console.log(unref(count))

    return {
      name,
      age,
      height,
    }
  }
}
</script>
<template>
  <div id="app">
    <h1>{{ name }}--{{ age }}--{{ height }}</h1>
  </div>
</template>

<style lang="less">

</style>
